<template>
  <div>
    <h1 style="width:100%;text-align:left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海市浦东新区城市管理行政执法局陈述申辩笔录</h1>
    <el-form ref="form" :model="form" label-width="180px" style="width: 70%; padding: 0 30px;">
      <el-form-item>

          <span class="demonstration">陈述申辩时间：</span>
          <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
          <span class="demonstration">至</span>
          <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
      </el-form-item>
      <el-form-item label="陈述申辩地点：">
        <td>
          <el-input v-model="form.defenseStatementAreaVal"></el-input>
        </td>
      </el-form-item>
      <el-form-item label="陈述申辩人：">
        <td>
          <el-input v-model="form.defenseStatement"></el-input>
        </td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td> 性别：&nbsp;&nbsp;</td>
        <td>
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </td>
        <td>&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="demonstration">生日：</span>
          <el-date-picker
            v-model="value3"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
          &nbsp;&nbsp;
        </td>
      </el-form-item>
      <el-form-item label="身份证号码：">
        <td>
          <el-input v-model="form.IDCard"></el-input>
        </td>
        <td> &nbsp;&nbsp;&nbsp;&nbsp;工作单位：&nbsp;&nbsp;</td>
        <td>
          <el-input v-model="form.company"></el-input>
        </td>
      </el-form-item>

      <el-form-item label="职务：">
        <td>
        <el-input v-model="form.position"></el-input>
        </td>
        <td> &nbsp;&nbsp;&nbsp;&nbsp;联系地址：&nbsp;&nbsp;</td>
        <td>
          <el-input v-model="form.contactAddress"></el-input>
        </td>
      </el-form-item>

      <el-form-item label="邮编：">
        <td>
        <el-input v-model="form.postNo"></el-input>
        </td>
        <td> &nbsp;&nbsp;&nbsp;&nbsp;联系电话：&nbsp;&nbsp;</td>
        <td>
          <el-input v-model="form.telephone"></el-input>
        </td>
      </el-form-item>

      <el-form-item label="承办人员：">
        <td>
        <el-input v-model="form.officials"></el-input>
        </td>
        <td> &nbsp;&nbsp;&nbsp;&nbsp;记录人：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>
          <el-input v-model="form.recorder"></el-input>
        </td>
      </el-form-item>

      <el-form-item label="陈述申辩内容：">
        <td>
        <el-input type="textarea" v-model="form.defenseContent"></el-input>
        </td>
      </el-form-item>
      <el-form-item label="陈述申辩人签名：">
        <td>
          <el-input v-model="form.defenseSign"></el-input>
        </td>
        <td>&nbsp;&nbsp;
          <el-date-picker
            v-model="value4"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </td>
      </el-form-item>

      <el-form-item label="承办人员及记录人签名：">
        <td>
        <el-input v-model="form.recorderSign"></el-input>
        </td>
      </el-form-item>
      <el-form-item label="陈述申辩笔录附页：">
        <td>
        <el-input type="textarea" v-model="form.record"></el-input>
        </td>
        <td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;问：你对以上笔录是否有异议？如无异议，请签字：&nbsp;&nbsp;</td>
        <td>
          <el-input v-model="form.answer"></el-input>
        </td>
      </el-form-item>

      <el-form-item label="陈述申辩人签名：">
        <td>
          <el-input v-model="form.defenseSign2"></el-input>
        </td>
        <td>&nbsp;&nbsp;
          <el-date-picker
            v-model="value5"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </td>
      </el-form-item>
      <el-form-item label="承办人员及记录人签名：">
        <td>
        <el-input v-model="form.recorderSign2"></el-input>
        </td>
      </el-form-item>
    </el-form>
    <!--    <button @click="exportclick(form)">点击导出文件</button>-->
    <el-button class="filter-item" size="small" type="primary" icon="el-icon-download" @click="exportclick(form)">
      导出
    </el-button>
  </div>

</template>

<script>
    import docxtemplater from 'docxtemplater'
    import PizZip from 'pizzip'
    import JSZipUtils from 'jszip-utils'
    import {
        saveAs
    } from 'file-saver'

    export default {
        name: 'Demo',
        data() {
            return {
                form: {
                    remark: "上海市浦东新区城市管理行政执法局陈述申辩笔录",
                    datetime1: '',
                    datetime2: '',
                    datetime3: '',
                    datetime4: '',
                    datetime5: '',
                    defenseStatementAreaVal: '',
                    defenseStatement: '',
                    sex: '男',
                    birthday: '',
                    IDCard: '',
                    company: '',
                    position: '',
                    contactAddress: '',
                    postNo: '',
                    telephone: '',
                    officials: '',
                    recorder: '',
                    defenseContent: '',
                    defenseSign: '',
                    year: '',
                    month: '',
                    day: '',
                    recorderSign: '',
                    record: '',
                    answer: '',
                    defenseSign2: '',
                    year2: '',
                    month2: '',
                    day2: '',
                    recorderSign2: '',

                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
                value3: '',
                value4: '',
                value5: '',
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            formatterDate(date) {
                if (!date) {
                    return "";
                }
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hours = date.getHours();
                var minutes = date.getMinutes();

                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                var nowDate = year + "年" + month + "月" + day + "日" + hours + "时" + minutes + "分";
                return nowDate;
            },
            exportclick(e) {
                console.log(e)
                console.log("value1")
                const _this = this
                _this.datetime1 = this.formatterDate(this.value1);
                _this.datetime2 = this.formatterDate(this.value2);
                _this.datetime3 = this.formatterDate(this.value3);
                _this.datetime4 = this.formatterDate(this.value4);
                _this.datetime5 = this.formatterDate(this.value5);

                let docxsrc = "../../static/1.docx"; //模板文件的位置
                let docxname = e.remark; //导出文件的名字
                // 读取并获得模板文件的二进制内容
                JSZipUtils.getBinaryContent(docxsrc, function (error, content) {
                    // docxsrc是模板。我们在导出的时候，会根据此模板来导出对应的数据
                    // 抛出异常
                    if (error) {
                        throw error;
                    }

                    // 创建一个PizZip实例，内容为模板的内容
                    let zip = new PizZip(content);
                    // 创建并加载docx templater实例对象
                    let doc = new docxtemplater().loadZip(zip);
                    // 设置模板变量的值
                    doc.setData({
                        ...e, // e中的数据可以再模板中直接使用
                        datetime1: _this.datetime1,
                        datetime2: _this.datetime2,
                        datetime3: _this.datetime3,
                        datetime4: _this.datetime4,
                        datetime5: _this.datetime5,

                    });

                    try {
                        // 用模板变量的值替换所有模板变量
                        doc.render();
                    } catch (error) {
                        // 抛出异常
                        let e = {
                            message: error.message,
                            name: error.name,
                            stack: error.stack,
                            properties: error.properties
                        };
                        console.log(JSON.stringify({
                            error: e
                        }));
                        throw error;
                    }

                    // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
                    let out = doc.getZip().generate({
                        type: "blob",
                        mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                    });
                    // 将目标文件对象保存为目标类型的文件，并命名
                    saveAs(out, docxname);
                });
            }
        }
    }
</script>

<style>
</style>
